<%--
  Created by IntelliJ IDEA.
  User: 61741
  Date: 2017/12/1
  Time: 1:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>内衣巴巴</title>
    <jsp:include page="../common/portal-head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/app.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/style.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/font-awesome.min.css">
    <style>
        #changeCity{
            font-size: 0.8rem;
            line-height:1rem;
            cursor: pointer;
        }
        i.fa.fa-map-marker {
            font-size:1rem;
        }
    </style>
</head>
<body>
<div class="top-flow-wrap">
    <span class="top-welcome">您好!欢迎来到内衣巴巴！</span>
    <i class="fa fa-map-marker"></i>
    <label class="location-lable" id="changeCity"onclick="showAreaDialog(this)">北京</label>
    <c:choose>
        <c:when test="${empty uid}">
            <div class="register-login-wrap">
                <span><i class="fa fa-cart-plus"></i>购物车</span>
                <span onclick="javascript:window.location.href='${ctx}/register'"><i class="fa fa-file"></i>注册</span> |
                <span onclick="javascript:window.location.href='${ctx}/admin/login'"><i
                        class="fa fa-user-circle"></i>登录</span>
            </div>
        </c:when>
        <c:otherwise>
            <div class="register-login-wrap">
                <c:if test="${userType!=0}">
                    <a href="#">
                        <i class="fa fa-cart-plus"></i>购物车
                    </a>
                </c:if>
                <a href="${ctx}/admin/index"><i class="fa fa-user-md"></i>${username}</a>
            </div>
        </c:otherwise>
    </c:choose>
</div>
<div class="search-wrap-outline">
    <div class="top-logo-wrap">
    <img src="${ctx}/resources/portal/img/mylogo.jpg" onclick="javascript:window.location.href='${ctx}/home'" class="logo">
    </div>
    <div class="search-wrap">
     <div class="search-outline">
        <select id="searchType">
            <option value="">--请选择--</option>
            <option value="shop">商家</option>
            <option value="good">商品</option>
            <option value="info">资讯</option>
        </select>
        <input type="text" id="keyword" name="keyword" placeholder="输入关键字查询信息"/>
        <img src="${ctx}/resources/portal/img/search.png" onclick="searchSubmit()" id="search-pic">
        </div>
    </div>
    <div class="app-wrap">
    <img id="app-logo" src="${ctx}/resources/portal/img/wxgz.jpg">
        <div class="app-des">
        <h3><strong>内衣巴巴APP</strong></h3>
        <span>扫一扫下载</span>
        </div>
        <img id="phone-pic" src="${ctx}/resources/portal/img/icon_phone.png">
    </div>
</div>
<div class="top-menu-wrap">
    <ul class="top-main-menu">
        <li onclick="javascript:window.location.href='${ctx}/home'">首页
        </li>
        <li onclick="javascript:window.location.href='${ctx}/seller/index/seller'">厂商、供应商资讯
        </li>
        <li onclick="javascript:window.location.href='${ctx}/seller/index/agency'">代理商资讯
        </li>
        <li onclick="javascript:window.location.href='${ctx}/seller/index/parts'">辅助料/配件商资讯
        </li>
        <li onclick="javascript:window.location.href='${ctx}/logistics'">物流资讯
        </li>
        <li onclick="javascript:window.location.href='${ctx}/info'">行业热门资讯
        </li>
        <li onclick="javascript:window.location.href='${ctx}/allgoods/index'">全部商品
        </li>
    </ul>
</div>

<div class="page-container">
    <div class="slider-wrap">
        <div class="slider">
            <div class="slider-img">
                <ul class="slider-img-ul" id="slider-ul">
                </ul>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="ad-wrap" id="ad-wrap">
            <div id="top-info">
            </div>
        </div>
        <h2 class="guide-title"><strong style="font-weight: 700;">行业</strong>大牌</h2>
        <div class="logo-wrap">
            <div class="logo-item-outline" id="flag-shop"></div>

        </div>
        <h2 class="guide-title"><strong style="font-weight: 700;">推荐</strong>企业</h2>
        <div class="logo-wrap">
            <div class="logo-item-outline" id="slider-div">
                <ul id="adviceshop">
                </ul>
            </div>

        </div>
        <h2 class="guide-title"><strong style="font-weight: 700;">热门</strong>资讯<i class="fa fa-angle-double-right" onclick="javascript:window.location.href='${ctx}/info'"></i>
        </h2>
        <div class="info-top-wrap" id="hotinfo-top">

        </div>
        <div class="info-bot-wrap" id="hotinfo-oth">

        </div>
        <div class="title-wrap">
            <h2 class="guide-title" id="majorTitle"><strong style="font-weight: 700;">行业</strong>新品</h2>
        </div>
        <div class="new-goods-wrap" id="newgoods-top">
            <div class="goods-item-col1" id="newgood-pic1">
                <%--<img src="${ctx}/resources/portal/img/banner/hyxp-01.jpg">--%>
            </div>
            <div class="goods-item-col2">
                <div class="goods-item-col2-1">
                    <div class="goods-item-col2-pic1" id="newgood-pic2">
                        <%--<img src="${ctx}/resources/portal/img/banner/hyxp-02.jpg">--%>
                    </div>
                    <div class="goods-item-col2-pic2" id="newgood-pic3">
                        <%--<img src="${ctx}/resources/portal/img/banner/hyxp-03.jpg">--%>
                    </div>
                </div>
                <div class="goods-item-col2-2" id="newgood-pic4">
                    <%--<img src="${ctx}/resources/portal/img/banner/hyxp-04.jpg">--%>
                </div>
            </div>
        </div>


        <div class="sale-goods-wrap" id="adviceGood">

        </div>
    </div>
</div>
<jsp:include page="../portal/footer.jsp"></jsp:include>
<jsp:include page="../portal/citySelect.jsp"></jsp:include>
<%--轮播图tml--%>
<script id="slider-tml" type="text/html">
    {{if type="Link"}}
    <li onclick="javascript:window.location.href='\${value}'"><img src="\${url}"></li>
    {{else type="GOOD"}}
    <li onclick="javascript:window.location.href='${ctx}/good/index/\${value}'"><img src="\${url}"></li>
    {{else type="ARTICLE"}}
    <li onclick="javascript:window.location.href='${ctx}/article/index/\${value}'"><img src="\${url}"></li>
    {{/if}}
</script>
<%--导航测资讯tml--%>
<script id="portaltopinfo-tml" type="text/html">

    <div class="ad-item" onclick="javascript:window.location.href='${ctx}/articledetail/index/\${id}'">
        {{each(i,fg) flags}}
        <img class="ad-img" src="\${fg.img}" alt="资讯图片">
        {{/each}}
        <div class="ad-text">
            <img src="${ctx}/resources/portal/img/text.png" class="text-pic">
            <h4>\${main_title}</h4>
            <p>\${sub_title}</p>
        </div>
    </div>
</script>
<%--行业大牌tml--%>
<script id="flagshop_tml" type="text/html">
    <div class="logo-item">
        <div class="hover-shadow"></div>
        <img class="logo-img" src="\${userLogo}" alt="商家logo">
        <div class="check-button">
        <a href="javascript:window.location.href='${ctx}/shop/index/\${_id}'"><strong style="font-weight: 700;">点击进入</strong></a>
        </div>
        </div>
</script>
<script id="adviceshop_tml" type="text/html">
    <li >
        <img src="\${userLogo}" alt="商家logo" onclick="javascript:window.location.href='${ctx}/shop/index/\${_id}'">
    </li>
</script>
<%--热门资讯tml--%>
<script  id="hotinfotop-tml" type="text/html">
    <div class="info-top-item" onclick="javascript:window.location.href='${ctx}/articledetail/index/\${id}'">
        <div class="item-pic">
            {{each(i,fg) flags}}
        <img src="\${fg.img}">
            {{/each}}
        </div>
        <div class="item-text">
        <span class="info-title">\${main_title}</span>
        <span class="info-time">\${formatDate(create_time)}</span>
    <span class="info-dsc">\${sub_title}</span>
    </div>
    </div>
</script>
<%--热门资讯底部资讯tml--%>
<script  id="hotinfooth-tml" type="text/html">
    <div class="info-bot-outline" onclick="javascript:window.location.href='${ctx}/articledetail/index/\${id}'">
        <div class="info-bot-item">
            <div class="bot-item-pic">
                {{each(i,fg) flags}}
                <img src="\${fg.img}">
                {{/each}}
            </div>
            <div class="bot-item-text">
                <span class="bot-info-title">\${main_title}</span>
                <span class="bot-info-time">\${formatDate(create_time)}</span>
            </div>
            <span class="bot-info-dsc">\${sub_title}</span>
        </div>
    </div>
</script>

<%--行业新品tml--%>
<script id="newgoodlink-tml1" type="text/html">
            {{if location_id == 1}}
            <img src="\${img}"  onclick="javascript:window.location.href='${ctx}/gooddetail/index/\${goodID}'">
            <div class="gobuy-button" id="">
                <span>\${goodName}</span>
            </div>
            {{/if}}
</script>
<script id="newgoodlink-tml2" type="text/html">

    {{if location_id == 2}}
    <img src="\${img}" onclick="javascript:window.location.href='${ctx}/gooddetail/index/\${goodID}'">
    <div class="gobuy-button">
        <span>\${goodName}</span>
    </div>
    {{/if}}

</script>
<script id="newgoodlink-tml3" type="text/html">

    {{if location_id == 3}}
    <img src="\${img}" onclick="javascript:window.location.href='${ctx}/gooddetail/index/\${goodID}'">
    <div class="gobuy-button" >
        <span>\${goodName}</span>
    </div>
    {{/if}}

</script>
<script id="newgoodlink-tml4" type="text/html">

    {{if location_id == 4}}
    <img src="\${img}" onclick="javascript:window.location.href='${ctx}/gooddetail/index/\${goodID}'">
    <div class="gobuy-button" >
        <span>\${goodName}</span>
    </div>
    {{/if}}
</script>
<script id="newgoodgood-tml" type="text/html">
    {{if location_id > 4}}
    <div class="sale-goods-item" onclick="javascript:window.location.href='${ctx}/gooddetail/index/\${goodID}'">
        <div class="goods-item-pic">
            <img src="\${img}">
            <div class="gobuy-button" >
                <span>\${goodName}</span>
            </div>
        </div>
    </div>
    {{/if}}
</script>
<script src="${ctx}/resources/portal/script/xSlider.js" type="text/javascript"></script>

</body>
<script>
    $(function () {
        loadSlider("default");
        loadPortalShopList();
        loadadviceShoplist();
        loadPortalTopInfoList();
        loadPortalHotTopInfoList();
        loadPortalHotOthInfoList();
        loadGoodAdive();
    })
    function searchSubmit(){
        var type=$("#searchType").val();
        if(isEmpty(type)){
            bootbox.alert("请选择查询类型!");
        }
        var data ={
            keyword:$("#keyword").val()
        };
        switch (type){
            case "good":
                window.location.href = ctx+"/goodlist/index?"+$.param(data).replace(/(%5D|%5B)/g,"");
                break;
            case "shop":
                window.location.href = ctx+"/shoplist/index?"+$.param(data).replace(/(%5D|%5B)/g,"");
                break;
            case "info":
                window.location.href = ctx+"/infolist/index?"+$.param(data).replace(/(%5D|%5B)/g,"");
                break;
            default:
                bootbox.alert("请选择正确的查询类型!");
        }
    }
    function loadSlider(city) {
        var data = {city: city};
        asyncAjax({
            url: ctx + "/home/slider/list/PORTAL?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            success: function (res) {
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        $("#slider-ul").html("");
                        $("#slider-tml").tmpl(res["data"]).appendTo($("#slider-ul"));
                        // 修正轮播图插件图片宽度自适应问题

                        $(".slider-img").attr("style", "width:" + $(".slider-img-ul li").length * 100 + "% !important;");
                        $(".slider-img-ul>li>img").css({
                            width: $(".slider-wrap").width() + "px !important",
                            height: "auto !important"
                        });
                        $(".slider").xSlider({w: 1340});
                    }
                    else {
                        $("#newGood-table").html('<li><img src="${ctx}/resources/portal/img/banner/1-banner.jpg"></li>');
                    }
                }
                else {
                    bootbox.alert(res["msg"]);
                }
            }

        })
    }
    function loadPortalTopInfoList() {
        var data = { city:"default",pagetype:"PORTAL_TOP"}
        asyncAjax({
            url: ctx + "/portal/info/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#top-info").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                //console.log("res:%o", res);
                $("#top-info").html("");
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        $("#portaltopinfo-tml").tmpl(res["data"]).appendTo($("#top-info"));
                    }
                    else {
                        $("#top-info").html('<div class="alert alert-warning">该模块尚未配置任何资讯!</div>');
                    }
                } else {
                    bootbox.alert(res.msg);
                }
            }
        })
    }
    function loadPortalHotTopInfoList() {
        var data = { city:"default",pagetype:"PORTAL_HOT_TOP"}
        asyncAjax({
            url: ctx + "/portal/info/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#hotinfo-top").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                //console.log("res:%o", res);
                $("#hotinfo-top").html("");
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        $("#hotinfotop-tml").tmpl(res["data"]).appendTo($("#hotinfo-top"));
                    }
                    else {
                        $("#hotinfo-top").html('<div class="alert alert-warning">该模块尚未配置任何资讯!</div>');
                    }
                } else {
                    bootbox.alert(res.msg);
                }
            }
        })
    }
    function loadPortalHotOthInfoList() {
        var data = { city:"default",pagetype:"PORTAL_HOT_OTH"}
        asyncAjax({
            url: ctx + "/portal/info/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#hotinfo-oth").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                //console.log("res:%o", res);
                $("#hotinfo-oth").html("");
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        $("#hotinfooth-tml").tmpl(res["data"]).appendTo($("#hotinfo-oth"));
                    }
                    else {
                        $("#hotinfo-oth").html('<div class="alert alert-warning">该模块尚未配置任何资讯!</div>');
                    }
                } else {
                    bootbox.alert(res.msg);
                }
            }
        })
    }
    function loadPortalShopList() {
        var data = { pageType:'PORTAL',city:"default"}
        asyncAjax({
            url: ctx + "/portal/shop/flag/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#flag-shop").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                //console.log("res:%o", res);
                $("#flag-shop").html("");
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                            $("#flagshop_tml").tmpl(res["data"]).appendTo($("#flag-shop"));
                    }
                    else {
                            $("#flag-shop").html('<div class="alert alert-warning">该模块尚未配置任何店铺!</div>');
                    }
                } else {
                    bootbox.alert(res.msg);
                }
            }
        })

    }
    function loadadviceShoplist() {
        var data = { pageType:'ADVICE_SHOP',city:"default"}
        asyncAjax({
            url: ctx + "/portal/shop/flag/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#adviceshop").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                //console.log("res:%o", res);
                $("#adviceshop").html("");
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        $("#adviceshop_tml").tmpl(res["data"]).appendTo($("#adviceshop"));
                    }
                    else {
                        $("#adviceshop").html('<div class="alert alert-warning">该模块尚未配置任何店铺!</div>');
                    }
                } else {
                    bootbox.alert(res.msg);
                }
            },
            complete:function () {
                var odiv = document.getElementById('slider-div');
                var oul = odiv.getElementsByTagName('ul')[0];
                var ali = oul.getElementsByTagName('li');
                var spa = -2;
                oul.innerHTML=oul.innerHTML+oul.innerHTML;
                oul.style.width=ali[0].offsetWidth*ali.length+'px';
                function move(){
                    if(oul.offsetLeft<-oul.offsetWidth/2){
                        oul.style.left='0';
                    }
                    if(oul.offsetLeft>0){
                        oul.style.left=-oul.offsetWidth/2+'px'
                    }
                    oul.style.left=oul.offsetLeft+spa+'px';
                }
                var timer = setInterval(move,500)

                odiv.onmousemove=function(){clearInterval(timer);}
                odiv.onmouseout=function(){timer = setInterval(move,500)};
                document.getElementsByTagName('a')[0].onclick = function(){
                    spa=-2;
                }
                document.getElementsByTagName('a')[1].onclick = function(){
                    spa=2;
                }
            }
        })

    }
    function loadGoodAdive() {
        var data = {city:"default"}
        asyncAjax({
            url: ctx + "/portal/newgoodinfo/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#adviceGood").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                //console.log("res:%o", res);
                $("#adviceGood").html("");
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        $("#newgoodgood-tml").tmpl(res["data"]).appendTo($("#adviceGood"));
                        $("#newgoodlink-tml1").tmpl(res["data"]).appendTo($("#newgood-pic1"));
                        $("#newgoodlink-tml2").tmpl(res["data"]).appendTo($("#newgood-pic2"));
                        $("#newgoodlink-tml3").tmpl(res["data"]).appendTo($("#newgood-pic3"));
                        $("#newgoodlink-tml4").tmpl(res["data"]).appendTo($("#newgood-pic4"));
                    }
                    else {
                        $("#adviceGood").html('<div class="alert alert-warning">该模块尚未配置商品!</div>');
                    }
                } else {
                    bootbox.alert(res.msg);
                }
            }
        })

    }
//    window.onload=function(){
//        var odiv = document.getElementById('slider-div');
//        var oul = odiv.getElementsByTagName('ul')[0];
//        var ali = oul.getElementsByTagName('li');
//        var spa = -2;
//        oul.innerHTML=oul.innerHTML+oul.innerHTML;
//        oul.style.width=ali[0].offsetWidth*ali.length+'px';
//        function move(){
//            if(oul.offsetLeft<-oul.offsetWidth/2){
//                oul.style.left='0';
//            }
//            if(oul.offsetLeft>0){
//                oul.style.left=-oul.offsetWidth/2+'px'
//            }
//            oul.style.left=oul.offsetLeft+spa+'px';
//        }
//        var timer = setInterval(move,500)
//
//        odiv.onmousemove=function(){clearInterval(timer);}
//        odiv.onmouseout=function(){timer = setInterval(move,500)};
//        document.getElementsByTagName('a')[0].onclick = function(){
//            spa=-2;
//        }
//        document.getElementsByTagName('a')[1].onclick = function(){
//            spa=2;
//        }
//    }

</script>
</html>